/*= common css to all effects =*/
.about-x {
    /*width: 100%;*/
    text-align: center;
    position: relative;
    max-height: 19rem;
    min-height: 19rem;
    overflow: hidden;
}

.about-x h3 {
    font-size: larger;
    font-weight: bold;
    margin-top: 0.5rem;
    /*padding-top: 0.5rem;*/
    line-height: 2.5rem;
}


.about-x h5 {
    font-size: 1rem;
    /*font-weight: initial;*/
    /*margin-bottom: 1rem;*/
    /*line-height: 1.5rem;*/
}

.about-x p {
    font-size: small;
    line-height: 1rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.about-x .about-x-image {
    border-bottom: 0.5rem solid #1fb554;
    height: 212px;
    overflow: hidden;
    width: 100%;
    transition: 0.4s;
    display: inline-block;
    float: none;
    vertical-align: middle;
}

.about-x:hover .about-x-image {
    height: 81px;
    transition: 0.4s;
}

.about-x .about-x-image img {
    max-width: 100%;
    vertical-align: bottom;
}


.about-x .about-x-info {
    transition: 0.4s;
}


.about-x .social-touch {
    background-color: #1fb554;
    float: left;
    left: 0;
    bottom: 0;
    overflow: hidden;
    padding: 5px 0;
    width: 100%;
    transition: 0.4s;
}

.about-x .social-touch a {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin: 0 2px;
    background-image: url(../images/social-icons.png);
    background-repeat: no-repeat;
    opacity: 0.7;
    transition: 0.3s;
}

.about-x .social-touch a:hover {
    opacity: 1;
    transition: 0.3s;
}

.about-x .wechart-touch {
    background-position: 0 0;
}

.about-x .qq-touch {
    background-position: -33px 0;
}

.about-x .weibo-touch {
    background-position: -66px 0;
}

.about-x .icon-colored .wechart-touch {
    background-position: 0 -35px;
}

.about-x .icon-colored .qq-touch {
    background-position: -33px -35px;
}

.about-x .icon-colored .weibo-touch {
    background-position: -65px -35px;
}
